<template>
    <div class="options-item-setting">
        <!-- 单选组或下拉列表单选情况 -->
        <el-radio-group 
            v-if="type === 'radio' || (type === 'select' && optionModel.multiple === false)"
            v-model="optionModel.defaultValue"
            @change="handleSetFieldValue"
            >
            <draggable 
                tag="ul" 
                :list="optionModel.optionItems" 
                item-key="id"
                v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}"
                animation="300"
            >
                <template #item="{ element:option,index:idx }">
                    <li class="option-item">
                        <el-radio :value="option.value">
                            <el-input v-model="option.value" size="small" style="width: 100px"></el-input>
                            <el-input v-model="option.label" size="small" style="width: 100px"></el-input>
                            <Icon  icon="formkit:draghandle" class="icon-drag drag-option ml-5 mr-5"/>
                            <el-button 
                                circle 
                                plain 
                                size="small" 
                                type="danger" 
                                @click="deleteOption(option, idx)"
                                icon="Minus" 
                                class="col-delete-button">
                            </el-button>
                        </el-radio>
                    </li>
                </template>
            </draggable>
        </el-radio-group>

        <!-- 多选情况 -->
        <el-checkbox-group
            v-if="type === 'checkbox' || (type === 'select' && optionModel.multiple)"
            v-model="optionModel.defaultValue"
            @change="handleSetFieldValue"
            >
            <draggable 
                tag="ul" 
                :list="optionModel.optionItems" 
                item-key="id"
                v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}"
                animation="300"
            >
                <template #item="{ element:option,index:idx }">
                    <li class="option-item">
                        <el-checkbox :value="option.value">
                            <el-input v-model="option.value" size="small" style="width: 100px"></el-input>
                            <el-input v-model="option.label" size="small" style="width: 100px"></el-input>
                            <Icon  icon="formkit:draghandle" class="icon-drag drag-option ml-5 mr-5"/>
                            <el-button 
                                circle 
                                plain 
                                size="small" 
                                type="danger" 
                                @click="deleteOption(option, idx)"
                                icon="Minus" 
                                class="col-delete-button">
                            </el-button>
                        </el-checkbox>
                    </li>
                </template>
            </draggable>
        </el-checkbox-group>

        <div class="opt">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-button type="primary" text @click="addOption">
                        增加选项
                    </el-button>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" text>
                        导入选项
                    </el-button>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" text @click="resetDefault">
                        重置
                    </el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { computed, nextTick } from 'vue';
import draggable from 'vuedraggable'
import Icon from '@/components/icons/index.vue'

const props = defineProps({
    optionModel:{
        type:Object,
        default:()=>({})
    },
    designer:{
        type:Object,
        default:()=>({})
    },
    selectWidget:{
        type:Object,
        default:()=>({}) 
    }
})

const type = computed(()=>props.selectWidget.type ?? "")

const deleteOption = (item,index)=>{
    props.optionModel.optionItems.splice(index, 1)
    // 如果删除项正好是激活项时候，清除默认值或者重新设置
    if((type.value === 'radio' || (type.value ==='select'&& props.optionModel.multiple ===false)) && item.value === props.optionModel.defaultValue){
        if(props.optionModel.optionItems.length ===0){
            props.optionModel.defaultValue = ''
            handleSetFieldValue("")
            return 
        }
        nextTick(()=>{
            const first = props.optionModel.optionItems[0]
            props.optionModel.defaultValue = first.value
            handleSetFieldValue(first.value)
        })
    }else if(type.value ==='checkbox' || (type.value ==='select'&& props.optionModel.multiple) && props.optionModel.defaultValue.includes(item.value)){
        if(props.optionModel.optionItems.length ===0){
            props.optionModel.defaultValue=[]
            handleSetFieldValue([])
            return 
        }
        nextTick(()=>{
            // 过滤掉删除的数据
            props.optionModel.defaultValue = props.optionModel.defaultValue.filter(val=>val !== item.value)
            handleSetFieldValue(props.optionModel.defaultValue)
        })
    }
}

const handleSetFieldValue = (val)=>{
    const setFieldVal =props.designer.getCurFieldFunById(props.selectWidget.id)
    setFieldVal(val)
}

const addOption = ()=>{
    props.optionModel.optionItems.push({
        value:'',
        label:''
    })
}

const resetDefault = ()=>{
    if(type.value === 'radio' || (type.value === 'select' && props.optionModel.multiple === false)){
        props.optionModel.defaultValue = ''
    }else {
        props.optionModel.defaultValue = []
    }
    handleSetFieldValue(props.optionModel.defaultValue)
}
</script>

<style lang='scss' scoped>
.options-item-setting{
    width: 100%;
    .el-radio-group{
        width: 100%;
        ul{
            width: 100%;
        }
    }
}
.option-item{
    width: 100%;
    label{
        display: flex;
        align-items: center;
        .el-radio__label{
            display: flex;
            flex:1;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>